<template>
  <!-- 组件结构 -->
  <div class="demo">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="showName">点我提示学校名</button>
  </div>
</template>


<!-- 
ES6模块化：3种暴露方式
    1.分别暴露
        export const a = 10
        export const getData = () => { }
        - 引用：import {???} from ???
    2.统一暴露
        export {school}
        - 引用：import {???} from ???
    3.默认暴露（用得多，当暴露的东西只有一个的时候，引入就只需要 import ??? from ???）
        export default school
        - 引用：import ??? from ???
-->
<script>
// 组件交互的相关代码（数据、方法等）
// 第一步：创建school组件
export default Vue.extend({ // Vue.extend()可以省略
  name: 'school',
  /* template: `
          <div>
	          <h2>学校名称：{{name}}</h2>
            <h2>学校地址：{{address}}</h2>
            <button @click="showName">点击提示学校名称</button>
          </div>
      `, */
  data() {
    return {
      name: '清华大学',
      address: '中国北京'
    }
  },
  methods: {
    showName() {
      alert(this.name)
    }
  }
})
</script>

<style>
/* 组件样式 */
.demo {
  background-color: orange;
}
</style>
